<template>
	<view class="bg" :class="{ show }" @click="emit('close')"></view>
	<view class="settings" :class="{ show }" :style="{ '--height': `${safeAreaInsets?.bottom}px` }">
		<view class="content">
			<view class="flex">
				<view class="tit">
					<view>字体</view>
					<view>大小</view>
				</view>

				<view class="box">
					<view class="list">
						<view class="item" v-for="item in fontSizes" :key="item.id">
							<view class="icon" :class="{ active: item.num == fontSize }"
								@click="emit('change', 'fontSize', item.num)">{{ item.tit }}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="flex">
				<view class="tit">
					<view>背景</view>
					<view>颜色</view>
				</view>

				<view class="box">
					<view class="list">
						<view class="item" v-for="item in bgs" :key="item.id">
							<view class="icon" :class="{ active: item.color == color }" :style="{ '--bg': item.color }"
								@click="emit('change', 'color', item.color)">
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { storeToRefs } from 'pinia'
	import { useSystemStore } from '@/stores/system'

	const systemStore = useSystemStore()
	const { safeAreaInsets } = storeToRefs(systemStore)

	interface Props {
		show : boolean,
		fontSize : number,
		color : string
	}

	withDefaults(defineProps<Props>(), {
		show: false,
		fontSize: 0
	})

	const emit = defineEmits(['close', 'change'])

	const fontSizes = [
		{ id: 1, tit: '小', num: 14 },
		{ id: 2, tit: '中', num: 18 },
		{ id: 3, tit: '大', num: 22 }
	]
	const bgs = [
		{ id: 1, color: '#f6f6f6' },
		{ id: 2, color: '#DFEDD6' },
		{ id: 3, color: '#E7D2D7' },
		{ id: 4, color: '#D1BFA7' }
	]
</script>

<style scoped lang="scss">
	.bg {
		position: fixed;
		top: 0;
		left: 0;
		@include size(100%);
		opacity: 0;
		transform: translateY(100%);
		z-index: 3;
		background-color: rgba(0, 0, 0, 0.2);
		transition: opacity .4s;

		&.show {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.settings {
		position: fixed;
		left: 0;
		bottom: calc(88rpx + var(--height));
		width: 100%;
		transform: translateY(100vh);
		opacity: 0;
		z-index: 3;
		background: #fff;
		transition: all .4s;

		&.show {
			opacity: 1;
			transform: translateY(0);
		}

		.content {
			padding: 20rpx 30rpx;

			.flex {
				padding: 20rpx 0;
				@include flex($align: center);
				flex-wrap: nowrap;

				.tit {
					@include tx(24rpx, 1.2);
					color: #000;
				}

				.box {
					margin-left: 30rpx;
					flex: 1;

					.list {
						margin: 0 -14rpx;
						@include flex($align: center);
						flex-wrap: nowrap;

						.item {
							padding: 0 14rpx;
							width: calc(25% - 28rpx);

							.icon {
								height: 46rpx;
								@include tx(28rpx, 46rpx);
								color: #5E6A94;
								text-align: center;
								border-radius: 12rpx;
								border: 2px solid transparent;
								background: var(--bg, #EEEEEE);

								&.active {
									border-color: #5599FF;
								}
							}
						}
					}
				}
			}
		}
	}
</style>